{extend name="base"/}
{block name="head"}{/block}
<!--{block name="menu"}菜单{/block}-->
{block name="left"}{/block}<!--左边分栏-->
<!--/meta 作为公共模版分离出去-->
{block name="main"}
<article class="page-container">
    <form class="form form-horizontal" id="form-article-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="articletitle" name="articletitle">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">简略标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="articletitle2" name="articletitle2">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章分类：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select name="articlecolumn" class="select">
                    <option value="0">全部栏目</option>
                    <{volist name="cate_list" id="cateList"}>
                    <{if condition="$cateList.parentId==0"}>
                        <option value="<{$cateList['id']}>"><{$cateList['cateName']}></option>
                        <{volist name="cate_list" id="cateList2"}>
                            <{if condition="$cateList2.parentId == $cateList.id"}>
					    <option value="<{$cateList2['id']}>">├&nbsp;<{$cateList2['cateName']}></option>
                    <{/if}>
                        <{/volist}>
                    <{/if}>
                    <{/volist}>
				</select>
				</span></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">排序值：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="0" placeholder="" id="articlesort" name="articlesort">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">关键词：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="keywords" name="keywords">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章摘要：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="abstract" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符"
                          datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！"
                          onKeyUp="$.Huitextarealength(this,200)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章作者：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="0" placeholder="" id="author" name="author">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章来源：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="0" placeholder="" id="sources" name="sources">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">允许评论：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="check-box">
                    <input type="checkbox" id="allowcomments" name="allowcomments" value="">
                    <label for="checkbox-pinglun">&nbsp;</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">评论开始日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text"
                       onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'commentdatemax\')||\'%y-%M-%d\'}' })"
                       id="commentdatemin" name="commentdatemin" class="input-text Wdate">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">评论结束日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text"
                       onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'commentdatemin\')}' })"
                       id="commentdatemax" name="commentdatemax" class="input-text Wdate">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                    <button id="btn-star" class="btn btn-default btn-uploadstar radius ml-10" style="margin-top: 20px">开始上传</button>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章内容：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea id="editor" type="text/plain" style="width:100%;height:400px;"></textarea>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button onClick="article_save_submit();" class="btn btn-primary radius" type="submit">
                    <i class="Hui-iconfont">&#xe632;</i> 保存并提交
                </button>
                <button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>


                {/block}
                {block name="footer"}

                <!--请在下方写此页面业务相关的脚本-->
                <script type="text/javascript" src="__ADMIN__/lib/My97DatePicker/4.8/WdatePicker.js"></script>
                <script type="text/javascript" src="__ADMIN__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
                <script type="text/javascript"
                        src="__ADMIN__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
                <script type="text/javascript" src="__ADMIN__/lib/jquery.validation/1.14.0/messages_zh.js"></script>
                <script type="text/javascript" src="__ADMIN__/lib/webuploader/0.1.5/webuploader.min.js"></script>
                <script type="text/javascript" src="__ADMIN__/lib/ueditor/1.4.3/ueditor.config.js"></script>
                <script type="text/javascript" src="__ADMIN__/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
                <script type="text/javascript" src="__ADMIN__/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('.skin-minimal input').iCheck({
                            checkboxClass: 'icheckbox-blue',
                            radioClass: 'iradio-blue',
                            increaseArea: '20%'
                        });
                        $(".webuploader-pick").next("div").css("top","auto!important");
                        //表单验证
                        $("#form-article-add").validate({
                            rules: {
                                articletitle: {
                                    required: true,
                                },
                                articletitle2: {
                                    required: true,
                                },
                                articlecolumn: {
                                    required: true,
                                },
                                articletype: {
                                    required: true,
                                },
                                articlesort: {
                                    required: true,
                                },
                                keywords: {
                                    required: true,
                                },
                                abstract: {
                                    required: true,
                                },
                                author: {
                                    required: true,
                                },
                                sources: {
                                    required: true,
                                },
                                allowcomments: {
                                    required: true,
                                },
                                commentdatemin: {
                                    required: true,
                                },
                                commentdatemax: {
                                    required: true,
                                },

                            },
                            onkeyup: false,
                            focusCleanup: true,
                            success: "valid",
                            submitHandler: function (form) {
                                //$(form).ajaxSubmit();
                                var index = parent.layer.getFrameIndex(window.name);
                                //parent.$('.btn-refresh').click();
                                parent.layer.close(index);
                            }
                        });

                        $list = $("#fileList"),
                            $btn = $("#btn-star"),
                            state = "pending",
                            uploader;

                        var uploader = WebUploader.create({
                            auto: true,
                            swf: 'lib/webuploader/0.1.5/Uploader.swf',

                            // 文件接收服务端。
                            server: 'fileupload.php',

                            // 选择文件的按钮。可选。
                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                            pick: '#filePicker',

                            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                            resize: false,
                            // 只允许选择图片文件。
                            accept: {
                                title: 'Images',
                                extensions: 'gif,jpg,jpeg,bmp,png',
                                mimeTypes: 'image/*'
                            }
                        });
                        uploader.on('fileQueued', function (file) {
                            var $li = $(
                                '<div id="' + file.id + '" class="item">' +
                                '<div class="pic-box"><img></div>' +
                                '<div class="info">' + file.name + '</div>' +
                                '<p class="state">等待上传...</p>' +
                                '</div>'
                                ),
                                $img = $li.find('img');
                            $list.append($li);

                            // 创建缩略图
                            // 如果为非图片文件，可以不用调用此方法。
                            // thumbnailWidth x thumbnailHeight 为 100 x 100
                            uploader.makeThumb(file, function (error, src) {
                                if (error) {
                                    $img.replaceWith('<span>不能预览</span>');
                                    return;
                                }

                                $img.attr('src', src);
                            }, thumbnailWidth, thumbnailHeight);
                        });
                        // 文件上传过程中创建进度条实时显示。
                        uploader.on('uploadProgress', function (file, percentage) {
                            var $li = $('#' + file.id),
                                $percent = $li.find('.progress-box .sr-only');

                            // 避免重复创建
                            if (!$percent.length) {
                                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo($li).find('.sr-only');
                            }
                            $li.find(".state").text("上传中");
                            $percent.css('width', percentage * 100 + '%');
                        });

                        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                        uploader.on('uploadSuccess', function (file) {
                            $('#' + file.id).addClass('upload-state-success').find(".state").text("已上传");
                        });

                        // 文件上传失败，显示上传出错。
                        uploader.on('uploadError', function (file) {
                            $('#' + file.id).addClass('upload-state-error').find(".state").text("上传出错");
                        });

                        // 完成上传完了，成功或者失败，先删除进度条。
                        uploader.on('uploadComplete', function (file) {
                            $('#' + file.id).find('.progress-box').fadeOut();
                        });
                        uploader.on('all', function (type) {
                            if (type === 'startUpload') {
                                state = 'uploading';
                            } else if (type === 'stopUpload') {
                                state = 'paused';
                            } else if (type === 'uploadFinished') {
                                state = 'done';
                            }

                            if (state === 'uploading') {
                                $btn.text('暂停上传');
                            } else {
                                $btn.text('开始上传');
                            }
                        });

                        $btn.on('click', function () {
                            if (state === 'uploading') {
                                uploader.stop();
                            } else {
                                uploader.upload();
                            }
                        });

                        var ue = UE.getEditor('editor');
                        $("#commentdatemin").val(today());

                    });
                    function today(){
                        var today=new Date();
                        var h=today.getFullYear();
                        var m=today.getMonth()+1;
                        var d=today.getDate();
                        var hh=today.getHours();
                        var mm=today.getMinutes();
                        var ss=today.getSeconds();
                        m= m<10?"0"+m:m;
                        d= d<10?"0"+d:d;
                        hh = hh < 10 ? "0" + hh:hh;
                        mm = mm < 10 ? "0" +  mm:mm;
                        ss = ss < 10 ? "0" + ss:ss;
                        return h+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
                    }
                </script>
                <!--/请在上方写此页面业务相关的脚本-->
<style>
    .uploader-list .item:first-child{
        margin-top: 30px;
    }
</style>
                {/block}